Menú arcoiris

• INICIO
• Día a día
• Fotografías
• La familia
• Reflexiones

Hace unos días en uno de los correos me pedían un menú para un blog muy especial, una página personal donde su autora escribe pensamientos y reflexiones durante su embarazo y sobre su bebé que está a punto de nacer.
Me pedía un menú para ese blog, yo le hablé de un menú que días atrás me había encantado pero ella quería algo de colores llamativos y alegres.
Estuve buscando porque algo había visto pero son tantos donde escoger que asaltan las dudas.
Me decidí por este que yo he llamado "Arcoiris" es un menú de Stu Nicholls que a ella le ha encantado. Y a decir verdad con el fondo de nubes da la sensación de estar en el país de las maravillas.

No es un problema si los colores no son de nuestro agrado, podemos sustituirlos por otros. Para añadir este menú nos dirigimos a plantilla Edición de HTML y justo antes de ]]></b:skin> añadimos lo siguiente:

Ver código

#painters { padding:0; margin:5em 0; list-style-type:none; }
#painters li { width:75px; height:20px; float:left; border:1px solid #000; margin-right:2px; }
#painters a em { font-style:normal; font-size:1em; line-height:1.5em; }
#painters a { text-decoration:none; color:#000; position:absolute; width:75px; height:20px; display:block; text-align:center; }#painters a.red {background:#c00; color:#fff;}
#painters a.orange {background:#fc0; color:#000;}
#painters a.yellow {background:#ee0; color:#000;}
#painters a.green {background:#080; color:#fff;}
#painters a.blue {background:#00c; color:#fff;}
#painters a:hover { width:120px; height:28px; z-index:200; background:#aaa; }
#painters a:hover em { font-size:1.5em; line-height:1.1em; overflow:hidden; cursor:pointer; background:#fff; border:1px solid #000; position:absolute; width:120px; height:25px; left:-12px; top:-8px; }
#painters a:hover.red em {background:#c00;}
#painters a:hover.orange em {background:#fc0;}
#painters a:hover.yellow em {background:#ee0;}
#painters a:hover.green em {background:#080;}
#painters a:hover.blue em {background:#00c;}

Guardamos los cambios y nos disponemos a añadir un gadget escogemos para ello HTML/Javascript y en su interior añadimos lo siguiente:

Ver código

<ul id="painters">
<li><a class="red" href="#"><em>INICIO</em></a></li>
<li><a class="orange" href="#"><em>Día a día</em></a></li>
<li><a class="yellow" href="#"><em>Fotografías</em></a></li>
<li><a class="green" href="#"><em>La familia</em></a></li>
<li><a class="blue" href="#"><em>Reflexiones</em></a></li>
</ul>

Sustituimos el texto y añadiremos el nuestro.
El lugar para añadir la url de la página a enlazar es sustituyendo el asterisco # de la misma línea.